<template>
	<view>
		<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条最新新闻动态</view>
		<uni-list>
			<uni-list-item v-for="item in lists" :key="item._id" :direction="direction(item.mode) ? 'column' : 'row'">
				<template v-slot:header>
					<view v-if="item.mode === 4" class="uni-thumb"><image :src="item.avatar" mode="aspectFill"></image></view>
					<view v-if="item.mode !== 4 && item.mode !== 5" class="uni-title">{{ item.title }}</view>
				</template>
				<template v-slot:body>
					<view class="content" :class="{ 'uni-content': item.mode === 1, 'uni-list-box': item.mode === 2, 'uni-media-box': item.mode === 3 }">
						<view v-if="item.mode === 1 || item.mode === 2" class="uni-thumb" :class="{ 'uni-content': item.mode === 1, ' list-picture': item.mode === 1 }">
							<image class="thumb-image" :src="item.avatar" mode="aspectFill"></image>
						</view>
						<image v-if="item.mode === 3" v-for="(img,index) in item.avatar" :key="index" class="uni-thumb" :src="img" mode="aspectFill"></image>
						<view class="uni-content">
							<view v-if="item.mode !== 1 && item.mode !== 3" class="uni-title-sub uni-ellipsis-2">{{ item.excerpt }}</view>
							<view v-if="item.mode !== 3" class="uni-note">{{ item.user_name }} {{ item.last_modify_date }}</view>
						</view>
					</view>
				</template>
				<template v-slot:footer>
					<view v-if="item.mode === 2" class="uni-footer">
						<view>
							<uni-icons type="chat" size="14" color="#999"></uni-icons>
							<text class="uni-footer-text">评论</text>
						</view>
						<view>
							<uni-icons type="hand-thumbsup" size="14" color="#999"></uni-icons>
							<text class="uni-footer-text">点赞</text>
						</view>
						<view>
							<uni-icons type="redo" size="14" color="#999"></uni-icons>
							<text class="uni-footer-text">分享</text>
						</view>
					</view>
					<view v-if="item.mode === 3" slot="footer" class="uni-note">{{ item.user_name }} {{ item.last_modify_date }}</view>
					<view v-if="item.mode === 5" slot="footer" class="uni-thumb" style="margin: 0;"><image :src="item.avatar" mode="aspectFill"></image></view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="lists.length > 0" :status="status" />
	</view>
</template>

<script>
import db from '@/js_sdk/uni-clientDB/index.js';
const dbCmd = db.command;
export default {
	data() {
		return {
			lists: [],
			reload: false,
			status: 'more',
			tipShow: false,
			page:1
		};
	},
	onLoad() {
		this.getNewsList(this.page);
	},
	methods: {
		direction(type) {
			return type === 1 || type === 2 || type === 3 || type === 6;
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1
			this.last_id = '';
			this.getNewsList();
		},
		onReachBottom() {
			this.reload = false;
			if(this.status === 'noMore') return
			this.page++
			this.getNewsList();
			
		},
		getNewsList() {
			this.status = 'loading'
			uniCloud.callFunction({
				name: 'uni-clientDB',
				data: {
					command: db.collection('opendb-news-article').where({
						_id: dbCmd.exists(true)
					}),
					pagination: {
						pageSize: 10,
						current: this.page
					}
				},
				success: res => {
					
					uni.stopPullDownRefresh();
					if (this.reload) {
						this.tipShow = true;
						clearTimeout(this.timer);
						this.timer = setTimeout(() => {
							this.tipShow = false;
						}, 2000);
					}
					let list = res.result.list;
					// list = this.getRandomArrayElements(list, 10);
					this.lists = this.reload ? list : this.lists.concat(list);
		
					if(this.lists.length === res.result.total){
						this.status ='noMore'
					}
					this.reload = false;
				},
				fail(err) {
					console.error(err);
				}
			});
		},
		getRandomArrayElements(arr, count) {
			var shuffled = arr.slice(0),
				i = arr.length,
				min = i - count,
				temp,
				index;
			while (i-- > min) {
				index = Math.floor((i + 1) * Math.random());
				temp = shuffled[index];
				shuffled[index] = shuffled[i];
				shuffled[i] = temp;
			}
			return shuffled.slice(min);
		}
	}
};
</script>

<style lang="scss">
@import '@/common/uni-ui.scss';
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
	min-height: 100%;
	height: auto;
}
.tips {
	color: #67c23a;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	background-color: #f0f9eb;
	height: 0;
	opacity: 0;
	transform: translateY(-100%);
	transition: all 0.3s;
}
.tips-ani {
	transform: translateY(0);
	height: 40px;
	opacity: 1;
}
.content {
	width: 100%;
	display: flex;
}
.list-picture {
	width: 100%;
	height: 145px;
}

.thumb-image {
	width: 100%;
	height: 100%;
}

.ellipsis {
	display: flex;
	overflow: hidden;
}

.uni-ellipsis-1 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.uni-ellipsis-2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>
